<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>火云鞋神购物鞋店--商品管理</title>
</head>
<link rel="shortcut icon" href="../img/favicon_2.ico"/>
<link rel="stylesheet" href="../css/base.css">
<link rel="stylesheet" href="../css/admin.css">
<link rel="stylesheet" href="../layui/css/layui.css" media="all">
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.9/cropper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.9/cropper.min.css"/>
<script src="../js/jquery-3.3.1.min.js"></script>

<style>
    #image {
        /*display: block;*/
        display: inline-block;

        /* This rule is very important, please don't ignore this */
        max-width: 100%;

    }
    #div {
        max-width: 100px;
        max-height: 100px;
    }

    #canvas{
        width: 100px;
        height: 100px;
        position: absolute;
        top: 532px;
        left: 660px;
    }
    .img{
        margin-left: 40px;
    }
</style>
<body>
<!--更改-->

<!--更改-->
<div class="header">

    <!--<div class="header_content">-->
    <!--<ul>-->
    <!--<li>售后编号</li>-->
    <!--<li>|</li>-->
    <!--<li>订单编号</li>-->
    <!--<li>|</li>-->
    <!--<li>订单状态</li>-->
    <!--<li>|</li>-->
    <!--<li>用户id</li>-->
    <!--<li>|</li>-->
    <!--<li>用户昵称</li>-->
    <!--<li>|</li>-->
    <!--<li>售后请求</li>-->
    <!--<li>|</li>-->
    <!--<li>处理状况</li>-->
    <!--<li>|</li>-->
    <!--<li>商品名称</li>-->
    <!--</ul>-->
    <!--</div>-->
</div>
<div class="content">
    <!--<table class="layui-hide" id="test" lay-filter="test"></table>-->

    <form class="layui-form" enctype="multipart/form-data" method="post" style="margin-top:30px" action="http://localhost:8080/nb/addgoods">
        <div class="layui-form-item">
            <label class="layui-form-label">商品名称</label>
            <div class="layui-input-block">
                <input type="text" name="goodName" required  lay-verify="required" placeholder="请输入商品名称" autocomplete="off" class="layui-input">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">商品价格</label>
            <div class="layui-input-block">
                <input type="text" name="goodMoney"   lay-verify="required" placeholder="请输入商品价格" autocomplete="off" class="layui-input">
            </div>
        </div>
       <!-- <div class="layui-form-item">
            <label class="layui-form-label">密码框</label>
            <div class="layui-input-inline">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">辅助文字</div>
        </div>-->
        <div class="layui-form-item">
            <label class="layui-form-label">品牌</label>
            <div class="layui-input-block">
                <select name="goodBrand" lay-verify="required">
                    <option value=""></option>
                    <option value="耐克（NIKE）">耐克（NIKE）</option>
                    <option value="阿迪达斯（adidas）">阿迪达斯（adidas）</option>
                    <option value="蓝中鸟（LanZhongNiao）">蓝中鸟（LanZhongNiao）</option>
                    <option value="特步（XTEP）">特步（XTEP）</option>
                    <option value="热风（Hotwind）">热风（Hotwind）</option>
                    <option value="威世米邦（WEISHIMIBANG）">威世米邦（WEISHIMIBANG）</option>
                    <option value="骆驼（CAMEL）">骆驼（CAMEL）</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">鞋帮</label>
            <div class="layui-input-block">
                <select name="goodUpper" lay-verify="required">
                    <option value=""></option>
                    <option value="高帮">高帮</option>
                    <option value="低帮">低帮</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">材质</label>
            <div class="layui-input-block">
                <select name="goodMaterial" lay-verify="required">
                    <option value=""></option>
                    <option value="合成革">合成革</option>
                    <option value="修面皮">修面皮</option>
                    <option value="棉布">棉布</option>
                    <option value="人造皮革">人造皮革</option>
                    <option value="太空革">太空革</option>
                    <option value="橡胶">橡胶</option>
                    <option value="绒面">绒面</option>
                    <option value="布">布</option>
                </select>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">科技</label>
            <div class="layui-input-block">
                <select name="goodScience" lay-verify="required">
                    <option value=""></option>
                    <option value="合成革">合成革</option>
                    <option value="修面皮">修面皮</option>
                    <option value="棉布">棉布</option>
                    <option value="人造皮革">人造皮革</option>
                    <option value="太空革">太空革</option>
                    <option value="橡胶">橡胶</option>
                    <option value="头层牛皮（除牛反绒）">头层牛皮（除牛反绒）</option>
                    <option value="布">布</option>
                    <option value="胶粘鞋">胶粘鞋</option>
                </select>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">店铺名称</label>
            <div class="layui-input-block">
                <input type="text" name="goodFamily" required  lay-verify="required" placeholder="请输入店铺名称" value="火云鞋神旗舰店" autocomplete="off" class="layui-input" disabled>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">适用人群</label>
            <div class="layui-input-block">
                <input type="radio" name="goodSex" value="男鞋" title="男鞋">
                <input type="radio" name="goodSex" value="女鞋" title="女鞋">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="upload">
                    <i class="layui-icon">&#xe67c;</i>上传图标
                </button>
                <br><br>
                <div style="width:200px;height:100px;border:3px solid #0099CC;border-radius: 5px;padding: 3px;">
                    <img style="max-width: 200px;max-height:200px;" id="preview">
                </div>
            </div>
        </div>
        <div class="layui-form-item">

            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>


    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
            <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
        </div>
    </script>

   <!-- <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>-->

    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="../layui/layui.js" charset="utf-8"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->



</div>


<script>

    var cropper
    //onchange 事件会在域的内容改变时发生
    document.getElementById("file").onchange = function (e) {
        document.getElementById("canvas").style.opacity = 1
        if (cropper) {
            //销毁裁剪器
            cropper.destroy()
        }
        //获取事件触发元素的文件
        //target 属性规定哪个DOM元素触发了该事件
        var file = e.target.files[0]

        //FileReader接口提供了读取文件的方法和包含读取结果的事件模型。
        var reader = new FileReader()
        //将文件读取为 DataURL
        reader.readAsDataURL(file)

        //文件读取完成时触发
        reader.onload = function (et) {
            /**
             * 文件一旦开始读取，无论成功或失败，实例的 result 属性都会被填充。
             * 如果读取失败，则 result 的值为 null ，否则即是读取的结果，
             * 绝大多数的程序都会在成功读取文件的时候，抓取这个值。
             * @type {string | ArrayBuffer}
             */
                //获取实例的result属性
            const clip = document.getElementById('image');
            clip.src = et.target.result
            //cropper = new Cropper(被裁剪对象,配置对象);
            cropper = new Cropper(clip, {
                // aspectRatio: 16 / 9,// 定义裁剪图比例
                //3 限制裁剪框不能超出图片的范围 且图片填充模式为 contain 最短边填充
                viewMode: 3,
                //默认不显示裁剪框
                //autoCrop:false,
                crop(event) {
                    // console.log(event.detail.width)
                    document.getElementById("canvas").style.width = event.detail.width/4 + "px"
                    document.getElementById("canvas").style.height = event.detail.height/4 + "px"
                    /**
                     * 拿到裁剪后的base64的图片,储存在浏览器缓存中
                     * base64文件编码的方式
                     * 将url转换成dataurl
                     * @type {string}
                     */
                    //cropper.getCroppedCanvas() 获得裁剪后的canvas元素
                    document.getElementById("canvas").src = cropper.getCroppedCanvas().toDataURL('image/jpeg')
                },
            });
        }
    }
    document.getElementById("btn").onclick = function () {
        var blob = dataURItoBlob(document.getElementById("canvas").src)
        var myFile = new File(
            [blob],
            document.getElementById("file").files[0].name,
            {type: document.getElementById("file").files[0].type});

        var formData = new FormData
        formData.set("file", myFile)
        $.ajax({
            url:"/clip/image",
            type:"post",
            data:formData,
            dataType:"json",
            processData: false,
            contentType: false,
            success:function (data) {

                if(data.code == 1){
                    alert("上传成功!")
                }else{
                    console.log("呜呜呜")
                }
            }
        })
    }
    document.getElementById("close").onclick = function ()  {
        document.getElementById("file").value = ""
        if (cropper) {
            cropper.destroy()
        }
        document.getElementById("image").src = ""
        document.getElementById("canvas").src = ""
        document.getElementById("canvas").style.opacity = 0

    }

    //将dataurl 转换为 blob
    function dataURItoBlob(base64Data) {
        var byteString;
        if (base64Data.split(',')[0].indexOf('base64') >= 0)
            byteString = atob(base64Data.split(',')[1]);
        else {
            byteString = unescape(base64Data.split(',')[1]);
        }
        var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
        var ia = new Uint8Array(byteString.length);
        for (var i = 0; i < byteString.length; i++) {
            ia[i] = byteString.charCodeAt(i);
        }
        var blob = new Blob([ia], {
            type: mimeString
        });
        return blob;
    }

</script>
<script>
    //Demo
    /*layui.use('form', function(){
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function(data){
            layer.msg(JSON.stringify(data.field));
            // return false;
            $.ajax({
                url: 'http://localhost:8080/nb/addgoods',
                type:"post",
                data: data.field,
                processDate:false,
                success: function (data) {
                    layer.msg("提交成功")
                }
            })
            return false;
        });
    });*/
    layui.use(['form', 'layer', 'upload'], function () {
        var layer = layui.layer;
        var upload = layui.upload;
        var $ = layui.jquery;

        upload.render({
            elem: '#upload',
            url: '{:U("http://localhost:8080/nb/addgoods")}',
            auto: false,//选择文件后不自动上传
            bindAction: '#commit',
            //上传前的回调
            before: function () {
                this.data = {
                    name: $('input[name="name"]').val()
                }
            },
            //选择文件后的回调
            choose: function (obj) {
                obj.preview(function (index, file, result) {
                    $('#preview').attr('src', result);
                })
            },
            //操作成功的回调
            done: function (res, index, upload) {
                var code = res.code === 0 ? 1 : 2;
                layer.alert(res.msg, {icon: code}, function () {
                    parent.window.location.reload();
                })
            },
            //上传错误回调
            error: function (index, upload) {
                layer.alert('上传失败！' + index);
            }
        });
    })
</script>
</body>
</html>